<script setup>

import ZCRK from "@/views/formPrint/ZCRK/index.vue";
import ZCPF from "@/views/formPrint/ZCPF/index.vue";
import ZCTK from "@/views/formPrint/ZCTK/index.vue";
import ZCJC from "@/views/formPrint/ZCJC/index.vue"
import ZCGH from "@/views/formPrint/ZCGH/index.vue"
import ZCDB from "@/views/formPrint/ZCDB/index.vue"

import api from './api.js'

const route = useRoute();
const applyType = route.params.applyType;
const number = route.params.number;
const detailInfo = ref({});

api.detailByNumber(number).then((res)=> {
  detailInfo.value = res;
});


provide('detailInfo', detailInfo);


</script>

<template>

  <div>
    <div class="topbar">
      <div class="back" @click="close">
        <i class="icon el-icon-arrow-left"></i>
        <span class="txt">返回</span>
      </div>
      <div class="title">打印表单</div>
      <el-button type="primary" size="small" @click="window.print()">打印</el-button>
    </div>
    <ZCRK v-if="applyType === 'ZCRK'"></ZCRK>
    <ZCPF v-if="applyType === 'ZCPF'"></ZCPF>
    <ZCTK v-if="applyType === 'ZCTK'"></ZCTK>
    <ZCJC v-if="applyType === 'ZCJC'"></ZCJC>
    <ZCGH v-if="applyType === 'ZCGH'"></ZCGH>
    <ZCDB v-if="applyType === 'ZCDB'"></ZCDB>
  </div>

  <div>

  </div>

</template>

<style scoped lang="scss">
.topbar {
  width: 100%;
  height: 40px;
  background-color: #fff;
  box-shadow: 0 2px 8px #e1e2e4;
  box-sizing: border-box;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

@media print {
  .topbar {
    display: none;
  }
}
</style>